<template>
  <el-dialog
    :title="dialogForm.dialogName"
    :visible.sync="showEdit"
    :close-on-click-modal="false"
    width="550px"
    center
    @close="close"
  >
    <el-form
      ref="dialogForm"
      :model="dialogForm"
      :rules="rules"
      label-width="100px"
      class="flex flex_center"
    >
      <el-form-item
        v-for="item in ruleList"
        :key="item.title"
        :label="item.title"
        :prop="item.field"
      >
        <el-input
          v-if="!item.option"
          v-model="dialogForm[item.field]"
          :type="item.type"
          clearable
          placeholder="请输入"
        />
        <el-select
          v-else
          v-model="dialogForm[item.field]"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="(it, Index) in infolist[item.option]"
            :key="Index"
            :label="it.text"
            :value="Number(it.value)"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('dialogForm')">提交</el-button>
      <el-button type="danger" @click="close()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    //  showEdit: Boolean,
    infolist: Object,
    dialogForm: Object
  },
  data() {
    return {
      showEdit: false,
      ruleList: [
       // { title: '编号', field: 'id' },
        { title: '产品名称', field: 'productName' },
        { title: '产品价格', field: 'productPrice' }, 
        { title: '产品类型', field: 'type', option: 'type' }, 
        { title: '状态', field: 'status', option: 'status' },
        { title: '备注', field: 'remark' }
      ],
      rules: {}
    }
  },
  computed: {},
  watch: {
    dialogForm(val) {
      // 监听变化的值,及时校验输入看数据
      if (!this.dialogForm.id && this.$refs['dialogForm']) {
        this.resetForm('dialogForm')
      }
    }
  },
  created() {
    this.ruleList.forEach((element) => {
      this.rules[element.field] = [
        { required: true, message: `${element.title}不能为空` }
      ]
    })
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // valid 表示输入框的校验结果,校验通过返回true
        if (valid) {
          this.updateOrSave()
        } else {
          return false
        }
      })
    },
    async updateOrSave() {
      const result = await this.$api.sysProduct.updateOrSave(this.dialogForm)
      if (result.code == '100') {
        // 成功消息提示
        this.$message.success('添加成功')
        // 关闭窗口
        this.close('insert')
      } else {
        if (result.message) this.$message.error(result.message)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 关闭弹框
    close(val) {
      const data = { name: 'xxx', isRefresh: val }
      // 子组件向父组件通信
      this.$emit('closeDialog', data)
      this.showEdit = false
    //  this.resetForm('dialogForm')
    }
  }
}
</script>
<style scoped>
</style>
